<html>

<head>
    <link href="./static/index.css" rel="stylesheet" type="text/css" />
    <link href="./static/style.less" rel="stylesheet/less" type="text/css" />
    <script src="./static/less.js" type="text/javascript"></script>
</head>

<body>
    <div class="config-keys">
        <ul>
            <li index="0">菜单设置</li>
            <li index="1">外观设置</li>
            <li index="2">外部连接</li>
            <li index="3">mysql设置</li>
            <li index="4">监听端口</li>
            <li index="5">本地缓存</li>
            <li index="6">检查更新</li>
            <li index="7">关于</li>
        </ul>
    </div>

    <div class="config menu-config" index="0" onactive="menuConfigs.queryMenus()">
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>菜单名称</th>
                    <th>菜单路径</th>
                    <th>是否启用</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>

    <div class="config apper-config" index="1" onactive="">
        <div class="row theme-row">
            <h3>主题</h3>
            <hr>
            <div>
                <label>选择主题</label>
                <select id="apperSelect" onchange="appearConfigs.changeTheme(this.value)">
                    <option value="-1">默认</option>
                    <option value="0">明亮</option>
                    <option value="1">深灰</option>
                    <option value="2">浅蓝</option>
                </select>
            </div>
        </div>
        <div class="row detailed-row">
            <h3>详细设置</h3>
            <hr>
            <div>
                <label>背景图片</label>
                <select onchange="appearConfigs.selectBgchange(this)" name="bgimgColor">
                    <option value="">----</option>
                    <option value="rgb(0, 0, 0)" style="background: rgb(0, 0, 0);"></option>
                    <option value="rgb(255, 255, 255)" style="background: rgb(255, 255, 255);"> </option>
                    <option value="rgb(51,51,51)" style="background: rgb(51,51,51);"></option>
                    <option value="rgb(226, 112, 112)" style="background: rgb(226, 112, 112);"></option>
                    <option value="rgb(226, 39, 39)" style="background: rgb(226, 39, 39);"></option>
                    <option value="rgb(0,68,187)" style="background: rgb(0,68,187);"></option>
                    <option value="rgb(7, 48, 119)" style="background: rgb(7, 48, 119);"></option>
                    <option value="rgb(117, 201, 117)" style="background: rgb(117, 201, 117);"></option>
                    <option value="rgb(26, 61, 26)" style="background: rgb(26, 61, 26);"></option>
                    <option value="rgb(255, 204, 64)" style="background: rgb(255, 204, 64);"></option>
                    <option value="rgb(155, 114, 0)" style="background: rgb(155, 114, 0);"></option>
                    <option value="rgb(167, 39, 167)" style="background: rgb(167, 39, 167);"></option>
                    <option value="rgb(73, 0, 73)" style="background: rgb(73, 0, 73);"></option>
                    <option value="rgb(119, 235, 235)" style="background: rgb(119, 235, 235);"></option>
                    <option value="rgb(7, 128, 128)" style="background: rgb(7, 128, 128);"></option>
                </select>

                <input id="bgInput" name="bgInput" onchange="appearConfigs.changeBgcolor(this)" placeholder="请输入">
                <button onclick="appearConfigs.selectImgFile(this)">选择本地文件</button>

                <div>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;支持本地文件、html颜色代码、url连接、base64代码,支持动图
                </div>
            </div>

            <div>
                <label>文字颜色</label>
                <select onchange="appearConfigs.selectColorchange(this)" name="colorColor">
                    <option value="">----</option>
                    <option value="rgb(0, 0, 0)" style="background: rgb(0, 0, 0);"></option>
                    <option value="rgb(255, 255, 255)" style="background: rgb(255, 255, 255);"> </option>
                    <option value="rgb(51,51,51)" style="background: rgb(51,51,51);"></option>
                    <option value="rgb(226, 112, 112)" style="background: rgb(226, 112, 112);"></option>
                    <option value="rgb(226, 39, 39)" style="background: rgb(226, 39, 39);"></option>
                    <option value="rgb(0,68,187)" style="background: rgb(0,68,187);"></option>
                    <option value="rgb(7, 48, 119)" style="background: rgb(7, 48, 119);"></option>
                    <option value="rgb(117, 201, 117)" style="background: rgb(117, 201, 117);"></option>
                    <option value="rgb(26, 61, 26)" style="background: rgb(26, 61, 26);"></option>
                    <option value="rgb(255, 204, 64)" style="background: rgb(255, 204, 64);"></option>
                    <option value="rgb(155, 114, 0)" style="background: rgb(155, 114, 0);"></option>
                    <option value="rgb(167, 39, 167)" style="background: rgb(167, 39, 167);"></option>
                    <option value="rgb(73, 0, 73)" style="background: rgb(73, 0, 73);"></option>
                    <option value="rgb(119, 235, 235)" style="background: rgb(119, 235, 235);"></option>
                    <option value="rgb(7, 128, 128)" style="background: rgb(7, 128, 128);"></option>
                </select>

                <input id="colorInput" name="colorInput" onchange="appearConfigs.changeTextcolor(this)"
                    placeholder="请输入" onchange="">

                <div>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;支持html颜色代码
                </div>
            </div>

            <div>
                <label>标签颜色</label>
                <select onchange="appearConfigs.selectTagchange(this)" name="tagColor">
                    <option value="">----</option>
                    <option value="rgb(0, 0, 0)" style="background: rgb(0, 0, 0);"></option>
                    <option value="rgb(255, 255, 255)" style="background: rgb(255, 255, 255);"> </option>
                    <option value="rgb(51,51,51)" style="background: rgb(51,51,51);"></option>
                    <option value="rgb(226, 112, 112)" style="background: rgb(226, 112, 112);"></option>
                    <option value="rgb(226, 39, 39)" style="background: rgb(226, 39, 39);"></option>
                    <option value="rgb(0,68,187)" style="background: rgb(0,68,187);"></option>
                    <option value="rgb(7, 48, 119)" style="background: rgb(7, 48, 119);"></option>
                    <option value="rgb(117, 201, 117)" style="background: rgb(117, 201, 117);"></option>
                    <option value="rgb(26, 61, 26)" style="background: rgb(26, 61, 26);"></option>
                    <option value="rgb(255, 204, 64)" style="background: rgb(255, 204, 64);"></option>
                    <option value="rgb(155, 114, 0)" style="background: rgb(155, 114, 0);"></option>
                    <option value="rgb(167, 39, 167)" style="background: rgb(167, 39, 167);"></option>
                    <option value="rgb(73, 0, 73)" style="background: rgb(73, 0, 73);"></option>
                    <option value="rgb(119, 235, 235)" style="background: rgb(119, 235, 235);"></option>
                    <option value="rgb(7, 128, 128)" style="background: rgb(7, 128, 128);"></option>
                </select>

                <input id="tagInput" name="tagInput" onchange="appearConfigs.changeTextcolor(this)" placeholder="请输入"
                    onchange="">

                <div>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;支持html颜色代码
                </div>
            </div>
        </div>
    </div>

    <div class="config link-config" index="2" onactive="linkConfigs.loadLinkConfig()">
        <div class="row pvf-row">
            <h3>pvf连接</h3>
            <hr>
            <table>
                <tr>
                    <td>连接工具</td>
                    <td>
                        <select id="pvftool" onchange="linkConfigs.pvfChange(this)">
                            <option value="0">PvfUtility</option>
                            <option value="1">Pvfedit</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>ip</td>
                    <td><input id="pvfip" placeholder="localhost" onkeyup="linkConfigs.pvfChange(this)"></td>
                </tr>
                <tr>
                    <td>端口</td>
                    <td> <input id="pvfport" type="number" placeholder="27000" onkeyup="linkConfigs.pvfChange(this)">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td><button onclick="linkConfigs.testPvfConnect()">测试连接</button></td>
                </tr>
            </table>
        </div>

        <div class="row npk-row">
            <h3>npk路径</h3>
            <hr>
            <div>
                <label>ImagePacks2路径</label>
                <input id="npkpath" placeholder="输入或拖入文件夹">
                <button onclick="linkConfigs.chooseImgPath(this)">选择文件夹</button>
                <button onclick="linkConfigs.buildCache(this)">建立缓存</button>
                <button onclick="linkConfigs.testCache(this)">检查缓存</button>
            </div>
        </div>
    </div>

    <div class="config mysql-config" index="3" onactive="">
        //mysql设置
    </div>

    <div class="config server-config " index="4" onactive="">
        //监听端口
    </div>

    <div class="config database-config " index="5" onactive="">
        //本地缓存
    </div>

    <div class="config " index="6" onactive="test()">
        <a onclick="jump('https://gitee.com/zero_kk')" class="url">
            跳转到发布页</a>
    </div>

    <div class="config " index="7" onactive="">
        <h4>《dnf台服吧 开发者工具平台》</h4>
        <p>
            版本:1.0.0 @2023.02.13
        </p>
        <p>
            开源协议: <a onclick="jump('https://opensource.org/licenses/GPL-3.0')" class="url">GPL-3.0 点击查看</a>
        </p>

        <p>
            相关链接:
        </p>
        <p>
            dnf台服吧:<a onclick="jump('https://tieba.baidu.com/f?kw=%E5%8F%B0%E6%9C%8Ddnf')"
                class="url">https://tieba.baidu.com/f?kw=台服dnf</a>
        </p>
        <p>
            gitee:<a onclick="jump('https://gitee.com/zero_kk/dnf-app')"
                class="url">https://gitee.com/zero_kk/dnf-app</a> (主程序)

        </p>
        <p>
            gitee:<a onclick="jump('https://gitee.com/zero_kk/dnf-app-plugins')"
                class="url">https://gitee.com/zero_kk/dnf-app-plugins</a> (插件和功能页面)
        </p>

        <h4>这是什么?</h4>
        <p>
            本软件是一个工具平台，适用于dnf台服私服修改作者，集成各类小工具，主打可视化编辑和定制化。
        </p>
        <p>
            本软件同时也是一个开源的工具开发平台，程序框架以插件的形式提供底层操作功能，包括pvf连接器，pvf解包，npk和img搜索导出，mysql链接等。
            可基于html和js代码开发功能页面。开发门槛低于C和C++，功能性高于e语言，性能略大于python，可跨平台。开发者无需关注底层实现，通过函数接口可快捷调用插件功能，工具开发者只需考虑实现过程，和页面样式(如果在意的话)
        </p>
        <p><a class="url">插件列表和指南</a></p>
        <p><a class="url">插件开发文档</a></p>
        <p><a class="url">功能页面开发文档</a></p>
        <p><a class="url">功能页面样式开发文档</a></p>
        <p><a class="url">框架开发文档</a></p>
    </div>

    <script src="./static/index.js"></script>
</body>

</html>